<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Query · Dorm</title>

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="/stylesheets/query.css" rel="stylesheet">
  </head>
  <body>
    <header>
    <%- include('./navbar.html'); %>
    </header>
    <main>
        <div class="b-example-divider"></div>

        <div class="container px-4 py-5" id="icon-grid">
            <h2 class="pb-2 border-bottom">Dorm Details</h2>

            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
            <div class="col d-flex align-items-start">
                <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
                <div>
                  <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-primary">A</span>
                    <span class="badge bg-primary rounded-pill"><%=dorm1unit1%></span>
                  </h4>
                <p>dorm1unit1.</p>
                <p>dorm for female.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
                <div>
                  <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-primary">B</span>
                    <span class="badge bg-primary rounded-pill"><%=dorm1unit2%></span>
                  </h4>
                <p>dorm1unit2.</p>
                <p>dorm for female.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
                <div>
                  <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-primary">C</span>
                    <span class="badge bg-primary rounded-pill"><%=dorm2unit1%></span>
                  </h4>
                <p>dorm2unit1.</p>
                <p>dorm for male.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
                <div>
                  <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-primary">D</span>
                    <span class="badge bg-primary rounded-pill"><%=dorm2unit2%></span>
                  </h4>
                <p>dorm2unit2.</p>
                <p>dorm for male.</p>
                </div>
            </div>
            
            
            
        </div>
    </main>
    
    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
